.taskModal {
  background-color: #191919;
  z-index: 11;

  .at-action-sheet__container {
    height: 1100px;
    background: url(https://ruizhi-ipland.oss-cn-nanjing.aliyuncs.com/scratch/taskBj.png) no-repeat;
    background-size: 100% 100%;
    background-color: transparent !important;
    z-index: 11;
  }

  .emptyContent {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;

    .emptyIcon {
      width: 370px;
      height: 240px;
    }
    .emptyExtraTitle {
      color: #fff;
      margin-top: 10px;
      font-size: 24px;
    }
  }

  .loadingContent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
  }

  .taskScrollView {
    height: 930px;
  }

  .taskModalHeader {
    margin-top: 20px;
    position: relative;
    height: 150px;
    .taskModalClose {
      width: 68px;
      height: 68px;
      position: absolute;
      right: 10px;
    }
    .tModalTitle {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: #9d9bfd;
      font-weight: bold;

      .tTitle {
        color: #9d9bfd;
        font-weight: bold;
      }

      .taskLeftIcon,
      .taskRightIcon {
        width: 42px;
        height: 20px;
      }
    }
    .tModalExtra {
      color: #9d9bfd;
      font-size: 20px;
    }
  }

  .taskModalContent {
    padding: 17px;

    .at-row {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: url(https://ruizhi-ipland.oss-cn-nanjing.aliyuncs.com/catchPlaything/task.png) no-repeat;
      background-size: 100% 100%;
      height: 124px;
      margin: 20px 0;
      position: relative;

      .timeLimit {
        background-color: #fa6287;
        font-size: 20px;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 72px;
        height: 36px;
        border-radius: 20px 0 20px 0;
        line-height: 36px;
      }

      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        .taskIcon {
          width: 80px;
          height: 78px;
        }
      }

      .right {
        .finishBtn::after,
        .disableBtn::after {
          border: 0;
        }

        .finishBtn {
          background: url(https://ruizhi-ipland.oss-cn-nanjing.aliyuncs.com/catchPlaything/taskSubmitBj.png) no-repeat;
          background-size: 100% 100%;
          width: 112px;
          height: 58px;
          font-size: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
        }

        .disableBtn {
          background: url(https://ruizhi-ipland.oss-cn-nanjing.aliyuncs.com/gameBase/disableTaskBtn.png) no-repeat;
          background-size: 100% 100%;
          width: 112px;
          height: 58px;
          font-size: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
        }
      }

      .middle {
        text-align: left;
        view {
          color: #bc9f84;
        }
        .taskName {
          display: flex;
          flex-direction: row;
          .taskTitle {
            padding-right: 10px;
            font-size: 28px;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 65%;
          }
        }
        .extraTitle {
          font-size: 24px;
          display: flex;
          flex-direction: row;
          white-space: break-spaces;
          view {
            font-size: 24px;
          }

          .syntheticCard,
          .prop,
          .meanCoin,
          .meanValue,
          .gameTimes {
            display: flex;
            flex-direction: row;
            view {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}
